<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/zhibojian.css">
    <title>直播间</title>
</head>

<body>
    <div class="zhibojian">

        <div class="zhibojian-content" id="zhiboing">
            <!-- 直播间左上角主播头像部分 -->
            <section>
                <div class="zhibojian_info fl">
                    <img src="images/zhubo_head01.png" alt="" id="end_btn" onclick="showhide()">
                    <div class="zhibojian_data">
                        <p>包小图</p>
                        <p><span class="icon">&#xe697;</span>120万</p>
                        <img src="images/zhibojian_data_aixin.png" alt="">
                    </div>
                </div>

                <!-- 直播间右上角用户礼物排行榜部分 -->
                <div class="paihang">
                    <img src="images/paihang01.png" alt="">
                    <img src="images/paihang02.png" alt="">
                    <img src="images/paihang03.png" alt="">
                    <img src="images/paihang04.png" alt="">
                    <img src="images/paihang_x.png" alt="">
                </div>
                <div class="clear"></div>
            </section>




            <!-- 排行榜前n名标题 -->
            <section>
                <p class="paihang_title fl">排行榜<span>小时榜前4名</span></p>
                <p class="uid fr">ID号:<span>145204</span></p>
                <div class="clear"></div>
            </section>

            <!-- 直播间用户打赏展示列表部分 -->
            <section>
                <div class="dashang fl">
                    <ul>
                        <li>
                            <img src="images/big_userhead01.png" alt="" class="fl">
                            <div class="dashang_user">
                                <p>包小图</p>
                                <p>送你<span>一辆跑车</span></p>
                                <img src="images/gift_car.png" alt="">
                            </div>
                        </li>
                        <li>
                            <img src="images/big_userhead02.png" alt="" class="fl">
                            <div class="dashang_user">
                                <p>包小图</p>
                                <p>送你<span>一辆跑车</span></p>
                                <img src="images/gift_balloon.png" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>
            </section>

            <!-- vip用户进入直播间 -->
            <section>
                <div class="vipenter fl">
                    <img src="images/sm_userhead01.png" alt="">
                    <p><span>包小图</span>进入了直播间</p>
                </div>
                <div class="clear"></div>
            </section>

            <!-- 在线用户评论列表 -->
            <section>

                <div class="pinglun fl">
                    <ul>
                        <li>
                            <img src="images/sm_userhead02.png" alt="">
                            <p>小姐姐好漂亮！</p>
                        </li>
                        <li>
                            <img src="images/sm_userhead03.png" alt="">
                            <p>小姐姐好漂亮！</p>
                        </li>
                        <li>
                            <img src="images/sm_userhead04.png" alt="">
                            <p>小姐姐好漂亮！</p>
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>
            </section>



            <!-- 底部评论区 -->
            <footer>
                <div class="foot">
                    <div class="pinglun_input">
                        <span class="icon">&#xe625;</span>
                        <input type="text" placeholder="说点什么吧！！">
                    </div>

                    <img src="images/share_item1.png" alt="">
                    <img src="images/share_item2.png" alt="">
                    <img src="images/share_item3.png" alt="">
                    <a href="home.html"><img src="images/share_item4.png" alt=""></a>
                </div>
                <div class="clear"></div>
            </footer>
        </div>



        <div class="endzhibojian" id="end_zhibo">

            <img src="images/endzhibojianhead.png" alt="">
            <p>包小图</p>
            <p>直播已结束</p>
            <p>直播时长：2小时</p>
            <ul>
                <li>
                    <p>452</p>
                    <p>新增礼物</p>
                </li>
                <li>
                    <p>452</p>
                    <p>观看人数</p>
                </li>
                <li>
                    <p>452</p>
                    <p>新增粉丝</p>
                </li>
            </ul>
            <p>关注主播，不再错过TA的任何直播</p>
            <button>关注主播</button>
            <button id="quit_btn" onclick="quitzhibojian()">退出</button>
        </div>
    </div>

    <script src="js/commen.js"></script>
</body>

</html>